<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    header {
      height: 200px;
    }

    .box {
      width: 100%;
      overflow: hidden;
      vertical-align: middle;
    }

    ul {
      /* 把li变成8张之后，需要，把ul的宽度变宽 */
      width: 800%;
      display: flex;


      /* transition: transform 300ms; */
    }

    li {
      flex: 1;
    }

    img {
      width: 100%;
    }
  </style>
</head>

<body>
  <header></header>
  <!-- 结构 -->
  <!-- li*6>a[href=#]>img[src=./images/$.jpg] -->
  <div class="box">
    <ul>
      <li><a href="#"><img src="./images/6.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/4.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/5.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/6.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
    </ul>
  </div>
</body>
<script src="./js/zepto.js"></script>
<script src="./js/touch.js"></script>
<script>
  /*
1.引入zepto和touch .js

2.获取元素-box,ul

3.注册左划事件

3.1 让当前的索引++，算出ul应该在的位置，设置给ul

4.注册右划事件

4.1让当前的索引--，算出ul应该在的位置，设置给ul

*/
// var box=$('.box');
// var ul=$('.box >ul');
// var currentIndenx=1;
// var imgwidth=box.width();
// var target=imgwidth*currentIndenx*-1;
// ul[0].style.transform='translate('+target+'px)';
// setTimeout(function(){
// ul[0].style.transition='transform 300ms';
// },1)
// box.on('swipeLeft',function(){
//   currentIndenx++;
//   var target=currentIndenx*imgwidth*-1;
//   ul[0].style.transform='translate('+target+'px)';
//   setTimeout(function(){
//     ul[0].transition='transform 300ms';
//   },1)
// })
// box.on('swipeRight',function(){
// currentIndenx--;
// var target=currentIndenx*imgwidth*-1;
// ul[0].style.transform='translate('+target+'px)';
// setTimeout(function(){
// ul[0].transition='transform 300ms';
// },1)
// })
// ul[0].addEventListener('transitionend',function(){
//   if(currentIndenx===0){
//     ul[0].style.transition='transform 0ms';
//     currentIndenx=ul[0].children.length-2;
//     var target=currentIndenx*imgwidth*-1;
//     ul[0].style.transform='translate('+target+'px)';
//     setTimeout(function(){
//       ul[0].style.transition='transform 300ms';
//     },1)
//   }
//   if(currentIndenx===ul[0].children.length-1){
//     ul[0].style.transition='transform 0ms';
//     currentIndenx=1;
//     var target=currentIndenx*imgwidth*-1;
//     ul[0].style.transform='translate('+target+'px)';
//     setTimeout(function(){
//       ul[0].style.transition='transform 300ms';
//     },1)
//   }
// })
// 获取元素
var box=$('.box');
var ul=$('.box>ul');
设置客户一开始认为的第一张图片是
var currentIndenx=1;
var imgWidth=box.width();
var target=imgWidth*currentIndenx*-1;
ul[0].style.transform='translate('+target+'px)';
gettimeout(function(){
  ul[0].style.transition='transform 300ms';
})
box.on('swipeLeft',function(){
currentIndenx++;
var target=imgWidth*currentIndenx*-1;
ul[0].style.transform='translate('+target+'px)';
})






</script>

</html>


// <!-- 无缝轮播
// 一开始要注册一个变量表示当前是第几张图片
// 设置让客户看到默认的第一张
// 计算ul长度，设置给ul,平移图片
// 当左滑的时候，让索引图片++
// 计算ul的长度，设置给ul,平移图片
// 当左滑到客户认为的第一张的时候(实际第二张),就停止平移，
// 立刻跳转到倒数第二张(跟第一张一样的图片)，然后开启平移
// 然后右滑，让索引-- -->
